<template>
    <div>
        <common-banner
            name="代理品牌"
            en-name="Distributing Brands"
            desc="丰富的品牌选择，多年的代理经验，无论是各品牌的支持力度还是通关能力，菲斯都具有国内最优的实力！选择菲斯，就是选择保障！"
        ></common-banner>
        <div class="page-center">
            <div class="breadcrumb">
                <el-breadcrumb separator-class="el-icon-arrow-right" class="mt-20 mb-20">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>代理品牌</el-breadcrumb-item>
                </el-breadcrumb>
            </div>

            <div class="brand-content">
                <p class="mt-20 mb-20 font-size-2">（点击品牌LOGO，进入品牌官网，点击品牌名称，查看品牌详情）</p>
                <h3 class="brand-title">自主品牌对照品：</h3>
                <div class="brand-container">
                    <div>
                        <a href="http://www.sincopharmachem.com/" target="_blank">
                            <img src="@/assets/imgs/19071109325557.gif" alt="" />
                        </a>
                    </div>
                    <div>
                        <div><a href="http://www.sincopharmachem.com/" target="_blank">Sinco Pharmachem</a></div>
                        <p class="font-size-4">
                            药物标准品研发中心，拥有国际领先标准的化学实验室，专业为化学药物领域的科学家提供复杂有机小分子化合物、杂质对照品、API标准品、稳定同位素。sinco已生产超30000个产品，远销全球40多个国家，服务的客户涵盖全球生物技术公司、药品生产企业、大学以及各种科研机构。Sinco始终以客户需求为导向，依托科学的管理方法和国际的科研技术，充分地帮助客户以合理的价格获得高品质的产品与服务
                            ，为客户创造卓越价值。
                        </p>
                    </div>
                </div>
                <h3 class="brand-title">进口品牌对照品：</h3>
                <div class="company-row">
                    <div class="company-card">
                        <div class="company-logo">
                            <a href="https://www.tlcstandards.com/" target="_blank">
                                <img
                                    src="@/assets/imgs/20130131111914_1188.jpg"
                                    style="width: 140px; height: 110px"
                                    alt="TLC Pharmaceutical Standards"
                            /></a>
                        </div>
                        <div>
                            <a href="https://www.tlcstandards.com/" target="_blank">TLC Pharmaceutical Standards</a>
                        </div>
                        <p class="description">
                            TLC为加拿大品牌，具有丰富的库存和优秀的品质，菲斯生物与TLC的合作已有多年的历史，为其主要经销商之一，选择菲斯，选择更好的TLC服务。
                        </p>
                    </div>

                    <div class="company-card">
                        <div class="company-logo">
                            <a href="http://www.trc-canada.com/" target="_blank"
                                ><img
                                    src="@/assets/imgs/TRC.jpg"
                                    style="width: 102px; height: 104px"
                                    alt="Toronto Research Chemicals"
                            /></a>
                        </div>
                        <div><a href="http://www.trc-canada.com/" target="_blank">Toronto Research Chemicals</a></div>
                        <p class="description">
                            TRC为加拿大本土品牌，有着较长的发展历史，庞大的化合物库，菲斯为其一级经销商，高效通关，国内最优价格，与TRC多年的合作形成了很好的默契。
                        </p>
                    </div>

                    <div class="company-card">
                        <div class="company-logo">
                            <a href="https://www.lgcstandards.com/" target="_blank">
                                <img
                                    src="@/assets/imgs/logo.jpg"
                                    style="width: 69px; height: 60px"
                                    alt="LGC Standards"
                                />
                            </a>
                        </div>
                        <div><a href="https://www.lgcstandards.com/" target="_blank">LGC Standards</a></div>
                        <p class="description">
                            LGC品牌标准品市场的品质标杆，为全球各政府部门所认可的标准物质供应商，菲斯生物为LGC国内授权一级经销商，选择菲斯购买LGC产品，意味着更好的品质和效率。
                        </p>
                    </div>
                </div>

                <div class="company-row">
                    <div class="company-card">
                        <div class="company-logo">
                            <a href="https://www.molcan.com/" target="_blank"
                                ><img
                                    src="@/assets/imgs/MC.jpg"
                                    style="width: 124px; height: 10p4x"
                                    alt="Molcan Corporation"
                            /></a>
                        </div>
                        <div><a href="https://www.molcan.com/" target="_blank">Molcan Corporation</a></div>
                        <p class="description">
                            MC为加拿大品牌，可提供一些稀有的和基分子有机化合物，医药杂质和相关化合物用用于医药研究，是菲斯生物优势品牌之一，为众多项目稀有杂质的有益补充。
                        </p>
                    </div>

                    <div class="company-card">
                        <div class="company-logo">
                            <a href="https://www.bioaustralis.com/" target="_blank"
                                ><img
                                    src="@/assets/imgs/BA.jpg"
                                    style="width: 164px; height: 90px"
                                    alt="BioAustralis Fine Chemicals"
                            /></a>
                        </div>
                        <div>
                            <a href="https://www.bioaustralis.com/" target="_blank">BioAustralis Fine Chemicals</a>
                        </div>
                        <p class="description">
                            BFC是澳大利亚品牌，专业供应试验用高纯微生物代谢物，擅长从放线菌、细菌和真菌中通过发酵或分离获得稀有代谢物。BioAustralis所提供的代谢物均由其自己实验室生产，品质和服务都有不错的保障，菲斯生物可高效进口相关化合物。
                        </p>
                    </div>

                    <div class="company-card">
                        <div class="company-logo">
                            <a href="http://www.phytolab.com/" target="_blank"
                                ><img
                                    src="@/assets/imgs/PHYTOLAB.jpg"
                                    style="width: 140px; height: 110px"
                                    alt="Phytolab GmbH & Co.KG"
                            /></a>
                        </div>
                        <div><a href="http://www.phytolab.com/" target="_blank">Phytolab GmbH & Co.KG</a></div>
                        <p class="description">
                            Phytolab为德国专业提供天然产物标准物质，为中药对照品主打国际生产商之一，Phytolab提供一千多种有文件记录的中药对照品。菲斯生物专业的标准品进口商可为您提供高效服务。
                        </p>
                    </div>
                </div>

                <h3 class="brand-title">全球官方标准品：</h3>
                <!-- HTML Structure -->
                <div class="standards-container">
                    <div class="standards-row">
                        <div class="standard-card">
                            <div class="standard-logo">
                                <a href="http://aoc.nifdc.org.cn/sell/home/search.html" target="_blank">
                                    <img
                                        src="@/assets/imgs/20190409174828_6458.jpg"
                                        style="width: 124px; height: 120px"
                                        alt="中检所标准品"
                                    />
                                </a>
                            </div>

                            <h2>中检所标准品</h2>
                            <p class="description">中检所标准品，菲斯生物高效供应。</p>
                        </div>

                        <div class="standard-card">
                            <div class="standard-logo">
                                <a
                                    href="https://store.usp.org/all-reference-standards/category/USP-1010"
                                    target="_blank"
                                >
                                    <img
                                        src="@/assets/imgs/USP.jpg"
                                        style="width: 140px; height: 110px"
                                        alt="USP标准品"
                                    />
                                </a>
                            </div>
                            <h2>USP标准品</h2>
                            <p class="description">USP为美国药典标准品，菲斯生物优势供应</p>
                        </div>

                        <div class="standard-card">
                            <div class="standard-logo">
                                <a href="https://crs.edqm.eu/" target="_blank">
                                    <img
                                        src="@/assets/imgs/EP-LOGO.jpg"
                                        style="width: 140px; height: 110px"
                                        alt="EP标准品"
                                    />
                                </a>
                            </div>
                            <h2>EP标准品</h2>
                            <p class="description">EP为欧洲药典标准品，高效清关，欧洲直购。菲斯生物是您效率的保障。</p>
                        </div>

                        <div class="standard-card">
                            <div class="standard-logo">
                                <a href="https://www.pharmacopoeia.com/shop/products/" target="_blank">
                                    <img
                                        src="@/assets/imgs/BP.jpg"
                                        style="width: 140px; height: 110px"
                                        alt="BP标准品"
                                    />
                                </a>
                            </div>
                            <h2>BP标准品</h2>
                            <p class="description">BP为英国药典标准品，英国直购，高效清关，菲斯生物是您效率的保障。</p>
                        </div>
                    </div>
                </div>
                <p class="intent gray5a font-size-8 mb-20 mb-40">
                    药物杂质研究，是一个复杂的过程，尤其是对照品的准备过程。除了官方标准品外，更是有其它多个复杂稀有的化合物结构需要定性定量检测。菲斯生物作为专业医药标准品供应商，整合全球资源，洞悉各品牌的优劣，根据客户的不同实验要求在保证整个项目杂质全面供应的前提下进行各品牌产品的组合。选择菲斯生物，是您高效，成本优化，品质的有力保障。
                </p>
            </div>
        </div>
    </div>
</template>
<script setup>
// import { ref, onMounted, onUnmounted } from 'vue'
import CommonBanner from '@/components/CommonBanner.vue'
</script>
<style lang="scss" scoped>
.brand-title {
    font-size: 18px;
    color: #5a5a5a;
    margin: 20px 0;
}
.brand-container {
    display: flex;
}
.brand-container,
.company-row {
    a {
        font-size: 20px;
        font-weight: bold;
        color: #5a5a5a;
        &:hover {
            color: #47cdff;
        }
    }
}

.company-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.company-card {
    flex: 1;
    min-width: 300px;
    padding: 20px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

    @media (max-width: 768px) {
        min-width: 100%;
    }
}

.company-logo {
    height: 110px;
    margin-bottom: 20px;
}

.description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    text-align: justify;
}

// SCSS Styles
.standards-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.standards-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;

    @media (max-width: 768px) {
        flex-direction: column;
    }
}

.standard-card {
    flex: 1;
    min-width: 250px;
    max-width: calc(25% - 30px);
    padding: 20px;
    text-align: center;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;

    &:hover {
        transform: translateY(-5px);
    }

    @media (max-width: 1024px) {
        max-width: calc(50% - 30px);
    }

    @media (max-width: 768px) {
        max-width: 100%;
    }
}

.standard-logo {
    width: 100%;
    max-width: 180px;
    height: 120px;
    margin-bottom: 20px;
}

h2 {
    font-size: 1.25rem;
    color: #333;
    margin: 15px 0;
}

.description {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 768px) {
    .page-center {
        width: auto !important;
    }
    .breadcrumb {
        margin-left: 10px;
    }

    .brand-content {
        padding: 0 16px !important;
    }
}
</style>
